// --------------------------------------------------
// YOUR BEST PRICES		August 2013																
// Global tools and elements
// --------------------------------------------------

// INDEX
// --------------------------------------------------
// VARS
// FONTS
// COLORS
// SPRITE
// TRIANGLE


// VARS
@pmiSprite  :  "/yourbestprices/static/images/sprite.png";
@FontPath   :  "/yourbestprices/static/font";

// FONTS
@font-face {
    font-family: 'Atro-R';
    src: url('@{FontPath}/atrss__2-webfont.eot');
    src: url('@{FontPath}/atrss__2-webfont.eot?#iefix') format('embedded-opentype'),
         url('@{FontPath}/atrss__2-webfont.woff') format('woff'),
         url('@{FontPath}/atrss__2-webfont.ttf') format('truetype'),
         url('@{FontPath}/atrss__2-webfont.svg#atrotissemisansregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Atro-I';
    src: url('@{FontPath}/atrssi_0-webfont.eot');
    src: url('@{FontPath}/atrssi_0-webfont.eot?#iefix') format('embedded-opentype'),
         url('@{FontPath}/atrssi_0-webfont.woff') format('woff'),
         url('@{FontPath}/atrssi_0-webfont.ttf') format('truetype'),
         url('@{FontPath}/atrssi_0-webfont.svg#atrotissemisans-italicregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Atro-L';
    src: url('@{FontPath}/atrssl_0-webfont.eot');
    src: url('@{FontPath}/atrssl_0-webfont.eot?#iefix') format('embedded-opentype'),
         url('@{FontPath}/atrssl_0-webfont.woff') format('woff'),
         url('@{FontPath}/atrssl_0-webfont.ttf') format('truetype'),
         url('@{FontPath}/atrssl_0-webfont.svg#atrotissemisans-lightregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

.Atro-R {
	font-family: 'Atro-R';
}
.Atro-I {
	font-family: 'Atro-I';
}
.Atro-L {
	font-family: 'Atro-L';
}

// COLORS
@white   :#fff;
@black   :#000;
// scale
@first   : #dddcd7;
@second  : #c9cac5;
@third   : #bcbdb8;
// end scale 
@fourth  : #508F9E;
@fifth   : #4fc966;
@sixth   : #493f57;
@seventh : #ff5c5d;

// SPRITE
.sprite (@left, @top, @width, @height) {
    background: url("@{Sprite}") @left @top no-repeat;
    width: @width;
    height: @height;
}

// TRIANGLE
.triangle-top (@color) {
	width: 0px;
	height: 0px;
	border-top: 20px solid transparent;
	border-bottom: 0px solid transparent;
	border-right: 26px solid @color;
}
.triangle-bottom (@color) {
	width: 0px;
	height: 0px;
	border-top: 0px solid transparent;
	border-bottom: 20px solid transparent;
	border-right: 26px solid @color;
}

// SHADOW
.boxShadow {
    position: relative;
    float: left;
    width: 100%;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;

	&.boxShadow:before, &.boxShadow:after{
	    content: "";
	    position: absolute;
	    z-index: -2;
	}
	&.boxShadow:before{
	    bottom: 15px;
	    left: 10px;
	    width: 46%;
	    height: 20%;
	    box-shadow: 0 15px 10px rgba(0, 0, 0, 0.5);
	    -webkit-transform: rotate(3deg);
	    -moz-transform: rotate(3deg);
	    -ms-transform: rotate(3deg);
	    -o-transform: rotate(3deg);
	    transform: rotate(3deg);
	}
	&.boxShadow:after{
	    right: 10px;
	    bottom: 15px;
	    width: 46%;
	    height: 20%;
	    box-shadow: 0 15px 10px rgba(0, 0, 0, 0.5);
	    -webkit-transform: rotate(-3deg);
	    -moz-transform: rotate(-3deg);
	    -ms-transform: rotate(-3deg);
	    -o-transform: rotate(-3deg);
	    transform: rotate(-3deg);
	}
}
